import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Toast, NavBar } from "react-vant";
import { ShareO } from "@react-vant/icons";
import axios from "axios";
// import "./indec.css";
const Index: React.FC = () => {
  const { id, tabIndex } = useParams();
  let navigate = useNavigate();

  let items = JSON.stringify([id, tabIndex]);

  let [itemsxq, setItemsxq] = useState({});
  let [gzflag, setGzflag] = useState(false);

  useEffect(() => {
    axios
      .get("/api/detail", {
        params: {
          items,
        },
      })
      .then((resp) => {
        let { itemsObj } = resp.data;
        setItemsxq(itemsObj);
      });
  }, []);

  const gz = () => {
    console.log("关注陈工");
    setGzflag(!gzflag);
  };

  return (
    <div>
      <NavBar
        title={itemsxq.title}
        onClickLeft={() => navigate(-1)}
        rightText={<ShareO fontSize={20} />}
        onClickRight={() => Toast("分享")}
      />
      <div className="top">
        <div className="top-top">
          <img src="../src/assets/603.jpg" />
          <div>
            <p className="name">{itemsxq.title}</p>
            <p>{itemsxq.yi}</p>
          </div>
          <div>
            <button className="gz" onClick={() => gz()}>
              {gzflag ? (
                <span className="ygz">已关注</span>
              ) : (
                <span className="wgz">关注</span>
              )}
            </button>
          </div>
        </div>
        <div className="top-button">
          <div>暂无</div>
          <div>暂无</div>
          <div>良好</div>
          <div>暂无</div>
        </div>
      </div>
      <div className="button">
        <div>
          <p>
            <img src="../../../public/image/yygh.png" />
          </p>
          <p>预约挂号</p>
          <p>未开通</p>
        </div>
        <div>
          <p>
            <img src="../../../public/image/zxzx.png" />
          </p>
          <p>在线咨询</p>
          <p>1对1咨询</p>
        </div>
        <div>
          <p>
            <img src="../../../public/image/srys.png" />
          </p>
          <p>私人医生</p>
          <p>未开通</p>
        </div>
        <div>
          <p>
            <img src="../../../public/image/zkfw.png" />
          </p>
          <p>专科服务</p>
          <p>未开通</p>
        </div>
      </div>
      <div className="pj">
        <span>患者评价</span>
        <span>更多&gt;</span>
      </div>
      <div className="pjsun">
        <span>解答详细49</span>
        <span>超有耐心41</span>
        <span>热心细致37</span>
        <span>医术高明27</span>
        <span>体贴细心22</span>
        <span>回复超快13</span>
      </div>
       <div><h2 style={{textAlign: 'center', marginTop: '10px', color: 'red'}}>手机号: 177***458**</h2></div>
      <div className="btnbtn">-让医疗健康服务不再难-</div>
    </div>
  );
};

export default Index;
